<template>
  <div class="root-box" id="FortenList">

    <van-popup v-model="showmatrAction" position="right" class="popup-80" @opened="opened" v-if = "propFlagPopup" closeable  >
      <van-field class="scan"
                 ref="searchKey"
                 v-model="searchKey" :placeholder="'回车搜索' + strings.defaultString(propSearchTextAppend, '')"
                 left-icon="search"
                 size="large"
                 clearable
                 border
                 @keyup.enter.native="handlePageSearch"
                 @clear="onCancel"       style="width: 80%;"
      />
      <van-radio-group v-model="radioItem"   v-if="propIsRadio" @change="radioChange(null)" style="    max-height: 88%; overflow: auto ">
        <van-cell-group >
          <van-cell
            style="border-top:0.5px solid  #ccc"
            v-for="(item) in (this.propFlagStatic && this.propFlagStatic == true ? getList() : list )"
            :key="item.id"
            currency=""
            @click="radioChange(item)"
          >
            <template #title>
              <slot :item="item">
                <van-row>
                  <van-col span="4">
                    <van-radio   :name="item" />
                  </van-col>
                  <van-col span="4">品名：</van-col>
                  <van-col span="14">{{item.matrName}}</van-col>
                </van-row>
                <van-row  >
                  <van-col span="4">
                  </van-col>
                  <van-col span="4">品规：</van-col>
                  <van-col span="14">{{item.matrSpec}}</van-col>
                </van-row>
              </slot>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>


      <van-checkbox  v-if ="!propNoCheck && !propIsRadio && list.length > 0" @change="checkAll()" v-model  = "checkAllValue">全选</van-checkbox>
      <van-checkbox-group v-if="!propIsRadio" v-model="result" ref="checkboxGroup">
        <van-cell-group>
          <van-cell
            style="border-top:0.5px solid  #ccc"
            v-for="(item) in list"
            :key="item.id"
            currency=""
          >
            <template #title>
              <slot :item="item">
                <van-row>
                  <van-col span="2">
                    <van-checkbox :name="item" ref="checkboxes" shape="square" />
                  </van-col>
                  <van-col span="4">品名：</van-col>
                  <van-col span="18">{{item.matrName}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="22">品规：{{item.matrSpec}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="10">单位：{{item.requiredUnit}}</van-col>
                  <van-col span="12">数量：{{item.skuQtyApply}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="10" :style="{color: item.skuQtyStock == 0 ? 'red' : item.skuQtyStock < item.skuQtyApply ? 'Orange' : 'green'}">库存数量：{{item.skuQtyStock}}</van-col>
                  <van-col span="12">请领人：{{item.creator}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="22">请领时间：{{item.gmtApply}}</van-col>
                </van-row>
              </slot>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-row v-show = 'list.length > 0 && !propFlagNoPage'>
        <van-col span="18">
          <van-pagination class="page" @change="fetchData" v-model="tablePage.currentPage" :total-items="tablePage.totalResult" :items-per-page="tablePage.pageSize"   mode="simple">
          </van-pagination>
        </van-col>
        <van-col span="6">
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="top"
            class="pagepop"
          >
            <template #reference>
              <van-button type="primary" size="small">每页{{tablePage.pageSize}}</van-button>
            </template>
          </van-popover>
        </van-col>
      </van-row>
      <van-row v-show = 'list.length < 1' style="text-align: center" >
        <van-col span="24">
          暂无
        </van-col>
      </van-row>
    </van-popup>
    <div v-else>
      <van-checkbox  v-if ="!propNoCheck && !propIsRadio && list.length > 0" @change="checkAll()" v-model  = "checkAllValue">全选</van-checkbox>
      <van-checkbox-group v-if="!propIsRadio" v-model="result" ref="checkboxGroup">
        <van-cell-group >
          <van-cell
            style="border-top:0.5px solid  #ccc"
            v-for="(item, index) in list"
            :key="item.id"
            currency=""
            @click="showItem(item)"
          >
            <template #title>
              <slot :item="item" :index="index">
                <van-row>
                  <van-col span="2">
                    <van-checkbox :name="item" ref="checkboxes" shape="square" />
                  </van-col>
                  <van-col span="4">品名：</van-col>
                  <van-col span="18">{{item.matrName}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="22">品规：{{item.matrSpec}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="10">单位：{{item.requiredUnit}}</van-col>
                  <van-col span="12">数量：{{item.skuQtyApply}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="10" :style="{color: item.stockQty == 0 ? 'red' : item.stockQty < item.skuQtyApply ? 'Orange' : 'green'}">库存数量：{{item.stockQty}}</van-col>
                  <van-col span="12">请领人：{{item.creator}}</van-col>
                </van-row>
                <van-row type="flex" justify="end">
                  <van-col span="22">请领时间：{{item.gmtApply}}</van-col>
                </van-row>
              </slot>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-row v-show = 'list.length > 0 && !propFlagNoPage' >
        <van-col span="18">
          <van-pagination class="page" @change="fetchData" v-model="tablePage.currentPage" :total-items="tablePage.totalResult" :items-per-page="tablePage.pageSize"  mode="simple" >
          </van-pagination>
        </van-col>
        <van-col span="6">
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="top"
            class="pagepop"
          >
            <template #reference>
              <van-button type="primary" size="small">每页{{tablePage.pageSize}}</van-button>
            </template>
          </van-popover>
        </van-col>
      </van-row>
      <van-row v-show = 'list.length < 1' style="text-align: center" >
        <van-col span="24">
          暂无
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
/* eslint-disable*/
import { List, Pagination, Popover   } from 'vant'
export default {
  title: '分页list',
  name: 'FortenList',
  components:{List, Pagination, Popover },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      checkAllValue: false,
      result: [],
      tablePage: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页记录条数
        totalResult: 0 //总记录数
      },
      queryWrapper: null, // 查询条件
      queryWrapperUser: null, // 查询条件
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: 10}, { text: 50}, { text: 100 }, { text: 200 }],
      searchKey: '',
      radioItem: '',
      showmatrAction: false,
      userParam: {}
    };
  },
  props: [  'propAutoFetchData','propPageSize', 'propPreQueryWrapper', 'propIsRadio', 'propFlagPopup', 'propUrl', 'propSearchFields', 'propSearchTextAppend','propNoCheck','propFlagNoPage', 'propFlagStatic'],
  methods: {
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(this.checkAllValue);
    },
    //加载数据
    fetchData() {
      //静态数据
      if (this.propFlagStatic && this.propFlagStatic == true) {
        return
      }
      let queryConditions = []
      let orderConditions = []
      // 拼接初始条件
      if (this.propPreQueryWrapper) {
        queryConditions.push(...this.propPreQueryWrapper.queryConditions)
      }

      if (this.queryWrapper != null && this.queryWrapper ) {
        queryConditions.push(...this.queryWrapper.queryConditions)
      }

      if (this.queryWrapperUser != null && this.queryWrapperUser ) {
        queryConditions.push(...this.queryWrapperUser.queryConditions)
      }

      if (this.queryWrapper && this.queryWrapper.orderConditions) orderConditions = this.queryWrapper.orderConditions
      if (this.queryWrapperUser && this.queryWrapperUser.orderConditions) orderConditions.push(...this.queryWrapperUser.orderConditions)

      let url = '/dept/apply_auto/page'
      if (this.propUrl)  url = this.propUrl
      this.list = []

      const params = {
        queryString: JSON.stringify(queryConditions),
        orderString: JSON.stringify(orderConditions),
        currentPage: this.tablePage.currentPage,
        rowsPerPage: this.tablePage.pageSize,
        userParam: this.userParam
      }
      this.$ajax.get(url, {params}).then(response => {
        if (response.code == 0) {
          this.tablePage.totalResult = parseInt(response.count == null ? response.data.length : response.count, 10)
          if (response.data.length > 0) {
            this.list = response.data
            this.loading = false;
          } else {
            // this.$notify.success('暂无数据')
          }
        }
      })
    },

    //添加数据
    pushData(data) {
      this.list.push(data)
    },

    //设置查询条件
    setQueryWrapper(wrapper, autoReload = true) {
      this.queryWrapper = wrapper
      if (autoReload) {
        this.fetchData()
      }
    },

    //获取已选中的
    getChecks() {
      return this.result
    },
    onSelect(action) {
      this.tablePage.pageSize = action.text
      this.fetchData()
    },
    showItem(item) {
      if (item != null) {
        console.log('FortenList.showItem', item)
        this.$emit('click', item)
      } else {
        console.log('FortenList.showItem', item)
        this.$emit('click', this.radioItem)
      }
      this.close()
    },
    radioChange(item) {
      if (item != null) {
        console.log('FortenList.radioChange', item)
        this.$emit('change', item)
      } else {
        console.log('FortenList.radioChange', item)
        this.$emit('change', this.radioItem)
      }
      this.close()
    },
    opened() {
      this.fetchData()
      setTimeout(() => {
        this.$refs.searchKey.focus()
      }, 1000)
    },
    show(){
      this.showmatrAction = true
    },
    close(){
      this.showmatrAction = false
    },
    //全局搜索
    handlePageSearch() {
      this.queryWrapperUser = this.$newWrapper()
      this.propSearchFields.forEach(field => this.queryWrapperUser.orlike(field, this.searchKey))
      this.fetchData()
    },
    //全局搜索
    onCancel() {
      this.searchKey = ''
      this.queryWrapperUser = null
      this.fetchData()
    },
    //全局搜索
    setUserParam(userParam2) {
      this.userParam = userParam2
    },

    getList() {
      //静态数据
      if (this.propFlagStatic && this.propFlagStatic == true) {
        if (this.strings.isNotBlank(this.searchKey)) {
          return  this.list.filter(ob => ob.text.indexOf(this.searchKey) > -1
            || this.pyutils.getAllFirstLetter(ob.text).toLowerCase().indexOf(this.searchKey.toLowerCase()) > -1
            || this.pyutils.chineseToPinYin(ob.text).toLowerCase().indexOf(this.searchKey.toLowerCase()) > -1)
        }
        return this.list
      }
      this.list
    }
  },
  created() {
    if (this.propAutoFetchData && this.propAutoFetchData == true)  this.fetchData()
  },
  watch:{  }
}
</script>

<style scoped lang="scss">
  .root-box{
    margin-bottom: 66px;
    background-color: #fff;

    .van-button{
      height: 25px;
    }

    .page /deep/ li{
      height: 25px;
    }

  }
</style>
